<template>
  <div class="rolesAdmin" v-loading="loading">
    <div class="title">菜单管理</div>
    <div class="searchBox">
      <el-form ref="form" :model="searchForm" size="small" inline>
				<el-form-item label="角色:">
					<el-select v-model="searchForm.rolesId" placeholder="请选择角色" @change="rolesChange">
            <p v-for="(item, index) of rolesList" :key="index">
              <el-option :label="item.description" :value="item.id"></el-option>
            </p>
          </el-select>
				</el-form-item>
      </el-form>
    </div>
    <div class="content">
      <p class="treeTips">选择你需要的菜单</p>
      <el-tree
        :data="resource"
        ref="tree"
        node-key="id"
        show-checkbox
        check-strictly
        :props="defaultProps">
      </el-tree>
    </div>
    <div class="floatBtn">
      <el-button class="greenBtn" size="small" @click="doSave">保存</el-button>
    </div>
  </div>
</template>
    
<script>
import posts from '@/plugins/request';
export default {
  name: "rolesAdmin",
  data() {
    return {
      msg: "hi rolesAdmin",
      loading: false,
      searchForm: {
        rolesId: ""
      },
      rolesList: [],
      resource: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
    }
  },
  methods: {
    async rolesChange(val) {
      this.loading = true
      let hasId = await posts.fetchRolseMenusList(val)
      this.setCheckedKeys(hasId)
      this.loading = false
    },
    setCheckedKeys(hasId) {
      this.$refs.tree.setCheckedKeys(hasId);
    },
    getCheckedKeys() {
      return this.$refs.tree.getHalfCheckedKeys().concat(this.$refs.tree.getCheckedKeys())
    },
    async doSave() {
      this.loading = true
      if(!this.searchForm.rolesId) {
        this.$notify({
          title: '提示',
          message: "请先选择角色！",
          type: 'warning'
        })
        return
      }
      let menuIds = this.getCheckedKeys()
      if(menuIds.length < 1) {
        this.$notify({
          title: '提示',
          message: "至少选择一项！",
          type: 'warning'
        })
        return
      }
      let result = await posts.updateRolseMenus({
        "menuIds": menuIds,
        "roleId": this.searchForm.rolesId
      })
      if(result.message !== "success") {
        this.$notify({
          title: '提示',
          message: "修改失败，稍后重试！",
          type: 'warning'
        })
        return
      }
      this.$notify({
        type: "success",
        title: "成功",
        message: "修改成功！左侧导航重新登录即可更新"
      })
      this.loading = false


    }
  },
  async created() {
    this.loading = true
    this.rolesList = await posts.fetchRolseList()
    let result = await posts.fetchResourceList()
    this.resource = result.data.children
    this.loading = false
  }
}
</script>

<style scoped>
.rolesAdmin {
  background: #fff;
  padding: 0 20px;
}
.rolesAdmin .title {
  position: relative;
  left: 15px;
  line-height: 70px;
  font-size: 16px;
}
.rolesAdmin .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.content {
  min-height: 332px;
  border: 1px solid #e6e6e6;
  padding: 0 15px;
}
.treeTips {
  font-size: 18px;
  margin: 20px 0;
}
.floatBtn {
  line-height: 60px;
}
</style>